import { Component } from "react";
import React, { Suspense } from "react";

const Content = React.lazy(() => import("./Content.js"));
// function Content() {
//   const data = fetchData();
//   console.log(data + 1);
//   return <p>{data}</p>;
// }

export default function App() {
  return (
    <Suspense fallback={"loading data"}>
      <Content />
    </Suspense>
  );
}

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false,
    };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true, message: error.message };
  }

  componentDidCatch(error, errorInfo) {
    console.log(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <div>出错了： {this.state.message}</div>;
    }
    return this.props.children;
  }
}
